<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器(simple selector)</title>

        <style type="text/css">
            *  { 
                font-size: 14px ; 
            }
            /* 在 CSS 中使用 class selector 时，需要在 className 之前添加 圆点 前缀 */
            .first {
                color: blue ;
            }

            .second {
                font-size: 18px ;
            }

            .third {
                border: 1px solid gray ;
            }


        </style>

    </head>
    <body>

        <h3>CLASS选择器 (class selector) </h3>

        <!-- 在 HTML 元素(element)的 开始标签 中通过 class 属性(attribute) 可以指定 零个 到 多个 className -->
        <!-- 如果同一个元素(element)的 class 属性中 包含(contain) 多个 className ，则多个 className 之间使用空格隔开 -->
        <div class="first second third">
            Class 选择器 (class selector) 是根据 className 来选择元素的。
        </div>

        <p class="first third">
            如果某个元素(element)的 class 属性(attribute)取值中包含指定的 className ，则会被该 className 对应的选择器命中。
        </p>

        <span class="first second">
            同一个元素(element)的 class 属性(attribute)中可以包含(contain)多个 className ，多个 className 会形成一个 列表 (classList)
        </span>
        
    </body>
</html>